<template>
  <div>
    <div class="whiteBg publicity_cont">
      <div :class="scrollClass?'block_scoll':'block_search clearfix'">
        <form action="#" @submit.prevent="searchBlock">
          <input class="left" type="text" v-model="searchVal" :placeholder="fontContent" @focus="focuss" @blur="blurr"
                 id="input1" ref="search"/>
        </form>
        <i class="iconfont icon-sousuo- right" @click="searchBlock"></i>
      </div>
      <div class="mapCon">
        <div class="mapBox">
          <img src="../../images/map.png" id="map1">
          <!-- <img src="../../images/blockImg.png" class="blockImg">-->
        </div>
        <div class="block_star">
          <div class="start_item position1"></div>
          <div class="start_item position2"></div>
          <div class="start_item position3"></div>
          <div class="start_item position4">
            <!-- <span class="line circleZoom1"></span> -->
          </div>
          <div class="start_item position5"></div>
          <div class="start_item position6"></div>
          <div class="start_item position7"></div>
          <div class="start_item position8"></div>
          <div class="start_item position9"></div>
          <div class="start_item position10"></div>
          <div class="start_item position11"></div>
          <div class="start_item position12"></div>
          <div class="start_item position13"></div>
          <div class="start_item position14"></div>
          <div class="start_item position15"></div>
          <div class="start_item position16"></div>
          <div class="start_item position17"></div>
          <div class="start_item position18"></div>
          <div class="start_item position19"></div>
          <div class="start_item position20"></div>
          <div class="start_item position21"></div>
          <div class="start_item position22"></div>
          <div class="start_item position23"></div>
          <div class="start_item position24"></div>
          <div class="start_item position25"></div>
          <div class="start_item position26"></div>
          <div class="start_item position27"></div>
          <div class="start_item position28"></div>
          <div class="start_item position29"></div>
          <div class="start_item position30"></div>
        </div>
        <div class="ani_line">
          <div class="circle"></div>
        </div>
        <!--   <div class="ani_item"></div> -->
        <!-- <div class="ani_item">

        </div> -->
      </div>
      <div class="join_plan">
        <i class="icon iconfont icon-jiahaoyou left"></i>
        <div class="left">
          <p>加入计划用户总数</p>
          <span>{{blockTotal}}</span>
        </div>
      </div>
    </div>
    <div class="whiteBg mgt10">
      <div class="block_hd">
        <span class="left">正在写入公示</span>
        <a class="right">如何查询？</a>
      </div>
      <my-roll :items="blockScroll"></my-roll>
    </div>
    <footer-view></footer-view>
  </div>
</template>
<script>
  import myRoll from '../../componentes/global/myRoll.vue'
  import getData from '../../service/getData.js'
  import * as types from '../../vuex/types.js'
  import './jquery'
  import './velocity'// 引入动画

  var eleAyyay;//需要随机的元素
  var hasEle = [];//已经随机到的
  var hasDone = [];//已经执行的
  export default {
    name: "publicity",
    data: () => ({
      fontContent: "输入用户编号查询公示",
      searchVal: '',
      blockScroll: {},
      blockTotal: '',
      swiperOption: {
        autoplay: 3000,
        direction: 'vertical',
        pagination: '.swiper-pagination',
        loop: true,
        height: 24
      },
      scrollClass: false,
      distance_info: { //方块公示小动画参数
        arr: [],  // 所有的方块
        itemWR: 0, //方块宽度
        itemR: 0, // 以pic4 为定位初始位置
        itemRNum: 0,
        item_num: 0,
        rightNum: 0,
        itemBorW: 0,
        drift: 6 // 设置方块的 起始位置数量
      }
    }),
    components: {
      myRoll
    },
    beforeRouteLeave(to, from, next) {
      //设置加载。。。page
      var el = document.querySelector(".pageLoad");
      if (el) {
        el.style.display = '-webkit-flex'
      }
      window.removeEventListener('scroll', this.handleScroll);
      next()
    },
    created: function () {
      this.$store.commit("WAIT_LOADING", true);
      window.addEventListener('scroll', this.handleScroll);
      let me = this;
      getData.getBlock({method: 'post'}).then(rep => {

        if (rep.respCode == '00') {
          me.blockScroll = rep.content.list;
          me.blockTotal = rep.content.totalUsers + 3000;
        } else {
          Toast({
            message: rep.errorInfo,
            duration: 1000
          });
        }
      })
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    },
    mounted: function () {
      // (function (d) {
      //     let src1 = d.createElement('script');
      //         src1.src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js";
      //     let src2 = d.createElement('script');
      //         src2.src = "https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js"
      //         d.body.appendChild(src1);
      //         d.body.appendChild(src2);
      //  })(document)
      let me = this;
      this.$nextTick(function () {
        window.addEventListener('scroll', this.scrollArtlist, false);
        eleAyyay = document.querySelectorAll(".start_item");//需要随机的元素
        this.randomAdd(1000);

        let clientW = parseInt($('div.mapCon').css('width')); // 取得 容器的宽度
        let html_font_size = parseInt($('html').css('fontSize')) //获得html 的字体大小,用于 rem 换算
        let itemW = html_font_size * 0.6; // 计算动画元素内容宽度
        let item_num = Math.floor(clientW / itemW) - 4; // 这边用于计算实际的动画元素数量,减去的元素 平均到每个元素的border
        let itemR = 4.8 * html_font_size; //元素距离右边框的距离
        let itemBorW = (clientW % itemW + (4 * itemW)) / (item_num * 2) //计算动画元素的border宽度
        let arr = new Array(item_num);
        this.distance_info.itemWR = itemW + itemBorW * 2;
        let dis = this.distance_info.itemWR * this.distance_info.drift; //设置 line 和 item的偏移量
        $('div.ani_line').css({
          right: (dis + itemW / 2)
        })
        for (let i = 0; i < item_num; i++) {
          arr[i] = $('<div></div>').css({
            'border-width': itemBorW,
            'border-color': '#4c4850',
            'border-style': 'solid',
            'right': dis
          });
        }
        this.distance_info.itemBorW = itemBorW;
        this.distance_info.item_num = item_num;
        this.distance_info.arr = arr;
        this.distance_info.itemR = itemR;
        this.distance_info.itemRNum = Math.floor(itemR / itemW);
        this.ani(item_num);
      });
    },
    methods: {
      /*
          方块公示动画
      */
      ani(num) {
        let self = this;
        let distance = 0;
        //  let isEnd = false;
        let time = 1;
        let lineEnd = false;
        if (num > 7) {
          distance = -this.distance_info.itemWR * (num - this.distance_info.drift - 1);
        } else if (num <= 7 && num !== 0) {
          distance = this.distance_info.itemWR * (num - 1);
        }
        if (num > 0) {
          $('div.ani_line').velocity({ // 下降竖线动画
            height: '2rem'
          }, {
            duration: 1000, //1500
            easing: "ease-in",
            // visibility: 'hidden',
            begin: function (ele) {
              ele[0].style.cssText += 'visibility:visible;height:0;'
            },
            progress: function (elements, complete) {
              var ani_item_go = function () { // 小方块动画
                $('div.mapCon')
                  .append(
                    $(self.distance_info.arr[num - 1])
                      .addClass('ani_item ani_item_active_down') // 小方块下降动画
                      .on('webkitAnimationEnd', function go(evnet) {
                        evnet.stopPropagation();
                        $(this).css('bottom', 0)
                          .removeClass('ani_item_active_down')
                          .off('webkitAnimationEnd', go)
                          .velocity({ // 小方块左右位移动画
                            translateX: distance
                          }, {
                            duration: 800, //1000
                            complete: function () {
                              num -= 1;
                              lineEnd = false;
                              self.ani(num); // 递归
                            }
                          })
                      })
                  )
              }
              if (complete > 0.8 && !lineEnd) {
                ani_item_go(); //执行小方块动画
                $('div.ani_line').velocity({  //下降竖线动画完成超过80%的时候 开始消失
                  opacity: 0
                }, {
                  duration: 400, //1000
                  complete: function (ele) {
                    this[0].style.cssText += 'opacity:1;visibility:hidden;';
                    if ($('div.circle')[0]) {
                      $('div.circle')[0].style.cssText = 'visibility:hidden; ';
                    }
                  }
                })
                lineEnd = true;
              }
            }
          })
        } else {
          let num = 0;
          let self = this;
          let item_num = this.distance_info.item_num;
          let dis = this.distance_info.itemWR * this.distance_info.drift;
          let arr = this.distance_info.arr;
          let itemBorW = this.distance_info.itemBorW;
          $('div.ani_item').addClass('ani_item_finish') //所有小方块完成运动后的消失动画
            .on('webkitAnimationEnd', function go(event) {
              event.stopPropagation();
              ++num;
              if (num === item_num) {
                $('div.ani_item').each(function (index, ele) {
                  this.style.cssText = "";
                  this.classList.remove('ani_item');
                  this.classList.remove('ani_item_finish');
                  $(this).remove();
                })
                for (let i = 0; i < item_num; i++) {
                  arr[i] = $('<div></div>').css({
                    'border-width': itemBorW,
                    'border-color': '#4c4850',
                    'border-style': 'solid',
                    'right': dis
                  });
                }
                self.ani(item_num);
              }
              $(this).off('webkitAnimationEnd', go);
            })
        }
      },
      handleScroll() {
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        if (scrollTop >= 40) {
          this.scrollClass = true;
        } else {
          this.scrollClass = false;
        }

      },
      focuss: function () {
        this.fontContent = ""
      },
      blurr: function () {
        this.fontContent = "输入用户编号查询区块链"
      },
      searchBlock: function () {
        if (this.searchVal) {
          this.$refs.search.blur()
          this.$router.push({
            name: "block-list",
            params: {usrId: this.searchVal}
          })
        }
      },
      randomAdd: function (time) {
        let me = this;
        setInterval(function () {
          var index = me.randomArray();
          if (!index && index != 0) {
            return
          }
          me.addEle(index);
        }, time);
      },
      addEle: function (index) {
        if (hasEle.contains(index) && hasDone.contains(index)) {
          return
        }
        hasDone.push(index);
        var elem = eleAyyay[index];
        var _span1 = document.createElement("span");
        _span1.className = 'line circleZoom1';
        var _span2 = _span1.cloneNode(true);
        var _span3 = _span1.cloneNode(true);
        elem.appendChild(_span1);
        setTimeout(function () {
          elem.appendChild(_span2);
        }, 1000);
        setTimeout(function () {
          elem.appendChild(_span3);
        }, 2000);
        setTimeout(function () {
          hasEle.removeVa(index);
          hasDone.removeVa(index);
          elem.innerHTML = '';
        }, 5000);

      },
      randomArray: function () {
        let me = this;
        if (hasEle.length == eleAyyay.length) {
          return;
        }
        var Range = eleAyyay.length - 1;
        var _index = Math.round(Math.random() * Range);
        if (!hasEle.contains(_index)) {
          hasEle.push(_index);//把下标存起来
        }
        return _index;//返回下标
      }
    }
  }
</script>
<style>

  .ani_line {
    background: -webkit-linear-gradient(bottom, rgba(236, 78, 138, 0.6), #f95a7c);
    background: -o-linear-gradient(bottom, rgba(236, 78, 138, 0.6), #f95a7c);
    background: -moz-linear-gradient(bottom, rgba(236, 78, 138, 0.6), #f95a7c);
    background: linear-gradient(to bottom, rgba(236, 78, 138, 0.6), #f95a7c);
    width: .2rem;
    height: 0;
    position: absolute;
    top: 16rem;
    z-index: 3;
  }

  .circle {
    width: .15rem;
    height: .15rem;
    border-radius: 50%;
    position: absolute;
    bottom: -1px;
    left: 0;
    visibility: hidden;
    z-index: 10;
    background: #f95a7c;
    background-position: center;
  }

  @keyframes ani_line_go {
    60% {
      height: 2rem;
    }

  ;
  }
  @keyframes ani_line_disappear {
    100% {
      height: 0
    }

  ;
  }
  .ani_item {
    width: .6rem;
    height: .6rem;
    background-clip: content-box;
    background: #f95a7f;
    box-sizing: content-box;
    position: absolute;
    /* right: 4.8rem; */
    bottom: 1rem;
    z-index: 2;
  }

  .ani_item_end {
    width: .8rem;
    height: .8rem;
    background-clip: padding-box;
    background: #f95a7c;
    box-sizing: border-box;
    border: .1rem solid #4c4850;
    position: absolute;
    z-index: 2;
  }

  .ani_item_active_down {
    animation: ani_item_active_go_down .5s ease-in forwards;
    display: block;
  }

  @keyframes ani_item_active_go_down {
    to, 60%, 80% {
      bottom: 0;
      animation-timing-function: ease-out;
    }
    70% {
      bottom: 3%;
    }
    90% {
      bottom: 1%;
    }
  }

  .ani_item_active_left {
    animation: ani_item_active_go_left 2s ease-in forwards;
    display: block;
  }

  @keyframes ani_item_active_go_left {
    to, 60%, 80% {
      bottom: 0;
      animation-timing-function: ease-out;
    }
    70% {
      bottom: 3%;
    }
    90% {
      bottom: 1%;
    }
  }

  .ani_item_finish {
    animation: ani_item_finish_go .5s 4 alternate;
  }

  @keyframes ani_item_finish_go {
    to {
      background: transparent;
      border: transparent;
    }
  }

  .publicity_cont {
    padding: 0.667rem 0.667rem 0 0.667rem;
  }

  .block_search {
    background: -webkit-linear-gradient(left, #ec4e8a, #f95a7c); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #ec4e8a, #f95a7c); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #ec4e8a, #f95a7c); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, #ec4e8a, #f95a7c); /* 标准的语法 */
    height: 3.125rem;
    line-height: 3.125rem;
    border-radius: 5px;
    padding: 0 0.667rem 0 1rem;
    margin-bottom: 0.667rem;
  }

  .block_scoll {
    background: -webkit-linear-gradient(left, #ec4e8a, #f95a7c); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #ec4e8a, #f95a7c); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #ec4e8a, #f95a7c); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, #ec4e8a, #f95a7c); /* 标准的语法 */
    height: 3.125rem;
    line-height: 3.125rem;
    padding: 0 0.667rem 0 1rem;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 9;
  }

  .block_search input {
    font-size: 1rem;
    background-color: transparent;
    color: #fff;
    height: 3.125rem;
    width: calc(100% - 2.6rem);
  }

  .block_search input::-webkit-input-placeholder {
    color: #fff;
  }

  .block_search input:-moz-placeholder {
    color: #fff;
  }

  .block_search input::-moz-placeholder {
    color: #fff;
  }

  .block_search input:-ms-input-placeholder {
    color: #fff;
  }

  .block_search i {
    color: #fff;
    font-size: 1.6rem;
  }

  .block_scoll input {
    font-size: 1rem;
    background-color: transparent;
    color: #fff;
    height: 3.125rem;
    width: calc(100% - 2.6rem);
  }

  .block_scoll input::-webkit-input-placeholder {
    color: #fff;
  }

  .block_scoll input:-moz-placeholder {
    color: #fff;
  }

  .block_scoll input::-moz-placeholder {
    color: #fff;
  }

  .block_scoll input:-ms-input-placeholder {
    color: #fff;
  }

  .block_scoll i {
    color: #fff;
    font-size: 1.6rem;
  }

  .publicity_cont img {
    width: 100%;
  }

  .join_plan .icon {
    font-size: 2.2rem;
    margin-right: 0.7rem;
    color: #666;
  }

  .join_plan {
    box-sizing: border-box;
    height: 4.7rem;
    padding: 1rem 0.5rem;
  }

  .join_plan div.left {
    line-height: 1;
    font-weight: bold;
  }

  .join_plan p {
    font-size: 1.2rem;
    color: #333;
    margin-bottom: 0.625rem;
  }

  .join_plan span {
    font-size: 1rem;
    color: #666;
  }

  .block_hd, .block-ul li {
    padding: 0 1.167rem;
    height: 2.8rem;
    line-height: 2.8rem;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
  }

  .block_hd span, .block-ul span {
    font-size: 1rem;
    color: #333;
    font-weight: bold;
  }

  .block_hd a, .block-ul a {
    font-size: 0.85rem;
    color: #666;
    margin-right: -0.2rem;
  }

  .block-ul span {
    font-size: 0.85rem;
  }

  .block-ul a {
    margin: 0;
  }

  .block-ul li {
    border-top: none;
  }

  .block-ul li::after {
    content: '';
    display: block;
    clear: both;
  }

  .block-ul li:nth-child(even) {
    background-color: #f8f8f8;
  }

  .mapCon {
    background: #4d4850;
    margin: .667rem;
    overflow: hidden;
    position: relative;
  }

  .mapBox {
    margin: .667rem;
  }

  .blockImg {
    margin-top: 2rem;
  }

  /*星星*/
  .block_star {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }

  .start_item {
    width: .4rem;
    height: .4rem;
    border-radius: .2rem;
    background: #f95a7c;
    position: absolute;
    z-index: 2;
  }

  .start_item .line {
    position: absolute;
    border: 1px solid #f95a7c;
    left: -10px;
    top: -10px;
    height: .4rem;
    width: .4rem;
    border-radius: .2rem;
    z-index: 1;
  }

  .circleZoom1 {
    -webkit-animation: zoom 3s linear;
    animation-fill-mode: forwards;
  }

  .circleZoom2 {
    -webkit-animation: zoom 3s linear;
    animation-fill-mode: forwards;
    transition-delay: 1s;
  }

  .circleZoom3 {
    -webkit-animation: zoom 3s linear;
    animation-fill-mode: forwards;
    transition-delay: 2s;
  }

  .position1 {
    right: 6.3rem;
    top: 5rem;
  }

  .position2 {
    right: 4.5rem;
    top: 2rem;
  }

  .position3 {
    right: 4rem;
    top: 10rem;
  }

  .position4 {
    right: 5rem;
    top: 15rem;
  }

  .position5 {
    right: 5rem;
    top: 11rem;
  }

  .position6 {
    right: 4rem;
    top: 11rem;
  }

  .position7 {
    right: 10rem;
    top: 12rem;
  }

  .position8 {
    right: 17rem;
    top: 7rem;
  }

  .position9 {
    right: 13rem;
    top: 9rem;
  }

  .position10 {
    right: 7rem;
    top: 8rem;
  }

  .position11 {
    right: 6rem;
    top: 8rem;
  }

  .position12 {
    right: 5rem;
    top: 7rem;
  }

  .position13 {
    right: 4.5rem;
    top: 9rem;
  }

  .position14 {
    right: 11rem;
    top: 15rem;
  }

  .position15 {
    right: 4.3rem;
    top: 10.3rem;
  }

  .position16 {
    right: 4.3rem;
    top: 12rem;
  }

  .position17 {
    right: 5.2rem;
    top: 12.3rem;
  }

  .position18 {
    right: 5.1rem;
    top: 10.5rem;
  }

  .position19 {
    right: 3.3rem;
    top: 11rem;
  }

  .position20 {
    right: 4rem;
    top: 13rem;
  }

  .position21 {
    right: 7.5rem;
    top: 10rem;
  }

  .position22 {
    right: 6.5rem;
    top: 9.5rem;
  }

  .position23 {
    right: 7rem;
    top: 13rem;
  }

  .position24 {
    right: 5rem;
    top: 13rem;
  }

  .position25 {
    right: 4.5rem;
    top: 14rem;
  }

  .position26 {
    right: 5.8rem;
    top: 10rem;
  }

  .position27 {
    right: 6.5rem;
    top: 11.6rem;
  }

  .position28 {
    right: 6rem;
    top: 10.7rem;
  }

  .position29 {
    right: 10rem;
    top: 8rem;
  }

  .position30 {
    right: 8rem;
    top: 15.7rem;
  }

  @keyframes zoom {
    0% {
      height: .2rem;
      width: .2rem;
      opacity: 1;
      left: 0;
      top: 0;
    }
    100% {
      height: 1.5rem;
      width: 1.5rem;
      border-radius: 1.5rem;
      opacity: 0;
      left: -0.5rem;
      top: -0.5rem;
    }
  }

  /**/
  .leftBlock {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 60%;
    display: block;
  }
</style>
